<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    let name = "小李";
    let isSex = true;
    let age = 18;
    let like = ["打游戏","打游戏","打游戏"];
    let obj = {
        name:"前端开发",
        name1:"送外卖",
        name2:"摆地摊"
    }
    let getPhone = ()=>110;
    let ol = (
        <ol>
            <li>姓名:{name}</li>
            {
               /* jsx 写注释 
               jsx在绑定布尔值 null undefind时返回得为空
               */ 
            }
            <li>性别:{isSex} {null} {undefined}</li>
            <li>年龄:{age}</li>
            {
                /* jsx 在绑定数组类型时 默认会将数组中得每一项展示出来 */
            }
            <li>爱好:{like}</li>
            {
                /* jsx不允许直接绑定对象类型 否则报错 */
            }
            <li>职业：{obj.name} {obj.name1}  {obj.name2}</li>
            <li>联系方式:{getPhone()}</li>    
        </ol>
    )

   ReactDOM.render(ol,document.getElementById("root"))
</script>
</html>